<div class="u-mdlayout" id="mainPage-mdlayout">
    <!--上面的大图布局-->
    <div class="u-row top-layout">
        <!--   窗口 -->
        <div class="u-col-xs-1 height-full padding-0">
            <div class="left-image">
                <img class="img-responsive" src="./static/banner-01.png">
            </div>
        </div>
        <!--   人物 -->
        <div class="u-col-xs-3 height-full">
            <div class="center-image">
                <img class="img-responsive" src="./static/banner-02.png">
            </div>
        </div>
        <!--   中间文字信息 -->
        <div class="u-col-xs-4 height-full">
            <div class="font-image">
                <img class="img-responsive" src="./static/banner-04.png">
            </div>
        </div>
        <!-- 最右侧桌子与官网链接 -->
        <div class="u-col-xs-4 height-full">
            <div class="u-form-group link-group">
                <div class="u-row link-col margin-0">
                    <ul class="u-col-xs-6">
                        <li class="topleft-link">
                            <a target="_blank" href="http://iuap.yonyou.com/">
                                <span> iuap 开发平台官网 </span>
                            </a>
                        </li>
                    </ul>
                    <ul class="u-col-xs-6">
                        <li class="topright-link">
                            <a target="_blank" href="http://iuap.design/">
                                <span> iuap Design官网 </span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="right-image">
                    <img class="img-responsive" src="./static/banner-03.png">
                </div>
            </div>
        </div>
    </div>

    <!--底层的四个显示-->
    <div class="u-row bottom-layout margin-0">
        <!--第一个档案-->
        <div class="u-col-xs-6 u-col-md-3 content">
            <div class="u-form-group">
                <div class="u-col-xs-12 content-svg">
                    <img src="./static/document.png">
                </div>
                <div class="u-col-xs-12 u-col-lg-10 u-col-lg-offset-1 content-title">
                   <span>展现了基于<a target="_blank" href="http://tinper.org/dist/neoui">neoui</a>的<a target="_blank" href="http://tinper.org/dist/neoui/plugin/grid.html">grid</a>控件的基本使用方法，利用<a target="_blank" href="http://tinper.org/dist/kero">kero</a>框架帮助开发者处理前后端数据模型：
                   </span>
                </div>
                <div class="u-col-xs-12  u-col-lg-10 u-col-lg-offset-1 content-li">
                    <ul>
                        <li><span>后端数据结构封装，数据传输优化</span></li>
                        <li><span>规范化异常处理</span></li>
                        <li><span>行状态处理 行编辑、前端排序、交换列</span></li>
                        <li><span>动态设置显示/隐藏列、拖动列宽度</span></li>
                        <li><span>跨页多选、枚举展示与编辑式</span></li>
                    </ul>
                </div>
            </div>
        </div>


        <!--第二个用户-->
        <div class="u-col-xs-6 u-col-md-3 content">
            <div class="u-form-group">
                <div class="u-col-xs-12 content-svg">
                    <img src="./static/usersvg.png">
                </div>
                <div class="u-col-xs-12 u-col-lg-10 u-col-lg-offset-1 content-title">
                    <span>利用可视化设计器构建主子结构模型，支持基于元数据的持久化方式，实现一对多映射关系等：</span>
                </div>
                <div class="u-col-xs-12 u-col-lg-10 u-col-lg-offset-1 content-li">
                    <ul>
                        <li><span>主子结构元数据的设计和使用</span></li>
                        <li><span>参照、枚举类数据结构的元数据使用</span></li>
                        <li><span>主子间数据联动和编辑维护的基本方式</span></li>
                        <li><span>元数据持久化组件<a target="_blank" href="http://iuap.yonyou.com/page/service/book/platform3/index.html#/platform3/articles/iuap-develop/9-/iuap-mdpersistence/3.0.0-release/manual.html">iuap-mdjdbc</a>的使用</span></li>
                        <li><span>分布式缓存的引入和使用</span></li>
                    </ul>
                </div>
            </div>
        </div>

        <!--第三个地址簿-->
        <div class="u-col-xs-6 u-col-md-3 content">
            <div class="u-form-group">
                <div class="u-col-xs-12 content-svg">
                    <img src="./static/addressbook.png">
                </div>
                <div class="u-col-xs-12 u-col-lg-10 u-col-lg-offset-1 content-title ">
                    <span> 展现了树、表格等控件的使用方式，实现了树和列表间数据的联动，树结构的编辑等功能：</span>
                </div>
                <div class="u-col-xs-12 u-col-lg-10 u-col-lg-offset-1 content-li">
                    <ul>
                        <li>
                            <span><a target="_blank" href="http://tinper.org/dist/neoui">neoui</a>中<a target="_blank" href="http://tinper.org/dist/neoui/plugin/tree.html">树控件</a>的基本展现
                            </span>
                        </li>
                        <li><span>树控件数据的分级加载</span></li>
                        <li><span>树结构多层次的编辑维护</span></li>
                        <li><span>表数据的快速搜索的实现</span></li>
                        <li><span>主子表结构<a target="_blank" href="http://iuap.yonyou.com/page/service/book/platform3/index.html#/platform3/articles/iuap-develop/9-/iuap-metadata/3.0.0-release/manual.html">元数据</a>的使用和持久化的支持</span></li>
                    </ul>
                </div>
            </div>
        </div>

        <!--第四个应用管理-->
        <div class="u-col-xs-6 u-col-md-3 content">
            <div class="u-form-group">
                <div class="u-col-xs-12 content-svg">
                    <img src="./static/applimanage.png">
                </div>
                <div class="u-col-xs-12 u-col-lg-10 u-col-lg-offset-1  content-title">
                    <span>实现了简单分页、多字段的快速搜索；使用了弹出窗方式的单据详细信息展示和编辑：</span>
                </div>
                <div class="u-col-xs-12 u-col-lg-10 u-col-lg-offset-1  content-li">
                    <ul>
                        <li>
                            <span><a target="_blank" href="http://tinper.org/dist/neoui">neoui</a>中表格、分页、下拉控件的使用方式</span>
                        </li>
                        <li><span>模态框、消息提示等示例</span></li>
                        <li><span>前端数据模型的创建和展示控件绑定</span></li>
                        <li><span>后端多种持久化方式的实现，如元数据和<a target="_blank" href="http://iuap.yonyou.com/page/service/book/platform3/index.html#/platform3/articles/iuap-develop/9-/iuap-mybatis/3.0.0-release/manual.html">iuap-mybatis</a></span></li>
                    </ul>
                </div>
            </div>
        </div>

    </div>
</div>

